<template>
  <div v-if="ModeVisible">
    <ReDialog :width="700" :height="500" :models="ModeVisible" @Closes="CloseModeVisible(RefMoelform)">
      <template #header>
        <h2 style="text-align: center;">新建企业评分模型</h2>
      </template>
      <template #main>
        <p class="zhushi"><span style="color: red;">注</span>:选项中带有*号的为必选项!</p>
        <div class="ModeVisible">
          <el-form :model="Moelform" label-width="120px" ref="RefMoelform">
            <el-form-item label="模型名称" prop="modeName" :rules="[
              {
                required: true,
                message: '请输入评分模型名称',
                trigger: 'blur',
              }]">
              <el-input v-model.trim="Moelform.modeName" maxlength="32" style="width: 370px;" />
            </el-form-item>
            <br>
            <!-- 需要添加的 -->
            <!--  企业基础信息 -->
            <TransitionGroup name="fade">
              <el-form-item label="企业基础信息" v-for="(m, i) in Moelform.EnterpriseMsg" :key="m.key"
                :prop="Moelform.EnterpriseMsg">
                <div class="modeForm">
                  <div class="el_sel_btn">
                    <ModeSelect v-model="m['EnterpriseMsg']" :ModeData="EnterpriseMsg" :ModeIsDisabled="m.IsDisabled" />
                    &emsp;&emsp;
                    <el-tooltip v-if="!m.IsDisabled" effect="dark" content="添加" placement="top">
                      <el-button @click="handleSelection(m, Number(m.key + 1), 'EnterpriseMsg', EnterpriseMsg)" link
                        class="tran45" type="primary" :icon="useRenderIcon(CloseBold)" /></el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top" v-else>
                      <el-button @click="deleteFormValue(m, m.key, 'EnterpriseMsg', EnterpriseMsg)" link type="danger"
                        :icon="useRenderIcon(CloseBold)" />
                    </el-tooltip>
                  </div>
                  <div class="show_view">
                    <div class="show_view_list show_left_bor1">
                      <p class="view_list1">{{ m['EnterpriseMsg']?.lableOne?.label }}</p>
                      <p class="view_list2">{{ m['EnterpriseMsg']?.lableTow?.label }}</p>
                      <div class="show_view_lists">
                        <dl v-for="(ll, ii) in m?.EnterpriseMsg?.lableTow?.children" :key="ii">
                          <dd>{{ ll.text }}</dd>
                          <dd><span>{{ ll.score }}分</span></dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <!--  领导者素质 -->
              <el-form-item label="领导者素质" v-for="(m, i) in Moelform.LeadershipQuality" :key="m.key"
                :prop="Moelform.LeadershipQuality">
                <div class="modeForm">
                  <div class="el_sel_btn">
                    <ModeSelect v-model="m['LeadershipQuality']" :ModeData="LeadershipQuality"
                      :ModeIsDisabled="m.IsDisabled" />
                    &emsp;&emsp;
                    <el-tooltip v-if="!m.IsDisabled" effect="dark" content="添加" placement="top">
                      <el-button @click="handleSelection(m, Number(m.key + 1), 'LeadershipQuality', LeadershipQuality)"
                        link class="tran45" type="primary" :icon="useRenderIcon(CloseBold)" /></el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top" v-else>
                      <el-button @click="deleteFormValue(m, m.key, 'LeadershipQuality', LeadershipQuality)" link
                        type="danger" :icon="useRenderIcon(CloseBold)" />
                    </el-tooltip>
                  </div>
                  <div class="show_view">
                    <div class="show_view_list show_left_bor2">
                      <p class="view_list1">{{ m['LeadershipQuality']?.lableOne?.label }}</p>
                      <p class="view_list2">{{ m['LeadershipQuality']?.lableTow?.label }}</p>
                      <div class="show_view_lists">
                        <dl v-for="(ll, ii) in m?.LeadershipQuality?.lableTow?.children" :key="ii">
                          <dd>{{ ll.text }}</dd>
                          <dd><span>{{ ll.score }}分</span></dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <!--  资金结构 -->
              <el-form-item label="资金结构" v-for="(m, i) in Moelform.FundStructure" :key="m.key"
                :prop="Moelform.FundStructure">
                <div class="modeForm">
                  <div class="el_sel_btn">
                    <ModeSelect v-model="m['FundStructure']" :ModeData="FundStructure" :ModeIsDisabled="m.IsDisabled" />
                    &emsp;&emsp;
                    <el-tooltip v-if="!m.IsDisabled" effect="dark" content="添加" placement="top">
                      <el-button @click="handleSelection(m, Number(m.key + 1), 'FundStructure', FundStructure)" link
                        class="tran45" type="primary" :icon="useRenderIcon(CloseBold)" /></el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top" v-else>
                      <el-button @click="deleteFormValue(m, m.key, 'FundStructure', FundStructure)" link type="danger"
                        :icon="useRenderIcon(CloseBold)" />
                    </el-tooltip>
                  </div>
                  <div class="show_view">
                    <div class="show_view_list show_left_bor3">
                      <p class="view_list1">{{ m['FundStructure']?.lableOne?.label }}</p>
                      <p class="view_list2">{{ m['FundStructure']?.lableTow?.label }}</p>
                      <div class="show_view_lists">
                        <dl v-for="(ll, ii) in m?.FundStructure?.lableTow?.children" :key="ii">
                          <dd>{{ ll.text }}</dd>
                          <dd><span>{{ ll.score }}分</span></dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <!--  经济实力 -->
              <el-form-item label="经济实力" v-for="(m, i) in Moelform.EconomicStrength" :key="m.key"
                :prop="Moelform.EconomicStrength">
                <div class="modeForm">
                  <div class="el_sel_btn">
                    <ModeSelect v-model="m['EconomicStrength']" :ModeData="EconomicStrength"
                      :ModeIsDisabled="m.IsDisabled" />
                    &emsp;&emsp;
                    <el-tooltip v-if="!m.IsDisabled" effect="dark" content="添加" placement="top">
                      <el-button @click="handleSelection(m, Number(m.key + 1), 'EconomicStrength', EconomicStrength)" link
                        class="tran45" type="primary" :icon="useRenderIcon(CloseBold)" /></el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top" v-else>
                      <el-button @click="deleteFormValue(m, m.key, 'EconomicStrength', EconomicStrength)" link
                        type="danger" :icon="useRenderIcon(CloseBold)" />
                    </el-tooltip>
                  </div>
                  <div class="show_view">
                    <div class="show_view_list show_left_bor4">
                      <p class="view_list1">{{ m['EconomicStrength']?.lableOne?.label }}</p>
                      <p class="view_list2">{{ m['EconomicStrength']?.lableTow?.label }}</p>
                      <div class="show_view_lists">
                        <dl v-for="(ll, ii) in m?.EconomicStrength?.lableTow?.children" :key="ii">
                          <dd>{{ ll.text }}</dd>
                          <dd><span>{{ ll.score }}分</span></dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <!--  经营效益 -->
              <el-form-item label="经营效益" v-for="(m, i) in Moelform.OperatingBenefit" :key="m.key"
                :prop="Moelform.OperatingBenefit">
                <div class="modeForm">
                  <div class="el_sel_btn">
                    <ModeSelect v-model="m['OperatingBenefit']" :ModeData="OperatingBenefit"
                      :ModeIsDisabled="m.IsDisabled" />
                    &emsp;&emsp;
                    <!-- <el-button @click="handleSelection(m, Number(m.key + 1), 'OperatingBenefit', OperatingBenefit)"
                    v-if="!m.IsDisabled" type="primary">添加</el-button>
                  <el-button @click="deleteFormValue(m, m.key, 'OperatingBenefit', OperatingBenefit)" type="danger"
                    v-else>刪除</el-button> -->

                    <el-tooltip v-if="!m.IsDisabled" effect="dark" content="添加" placement="top">
                      <el-button @click="handleSelection(m, Number(m.key + 1), 'OperatingBenefit', OperatingBenefit)" link
                        class="tran45" type="primary" :icon="useRenderIcon(CloseBold)" /></el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top" v-else>
                      <el-button @click="deleteFormValue(m, m.key, 'OperatingBenefit', OperatingBenefit)" link
                        type="danger" :icon="useRenderIcon(CloseBold)" />
                    </el-tooltip>
                  </div>
                  <div class="show_view">
                    <div class="show_view_list show_left_bor5">
                      <p class="view_list1">{{ m['OperatingBenefit']?.lableOne?.label }}</p>
                      <p class="view_list2">{{ m['OperatingBenefit']?.lableTow?.label }}</p>
                      <div class="show_view_lists">
                        <dl v-for="(ll, ii) in m?.OperatingBenefit?.lableTow?.children" :key="ii">
                          <dd>{{ ll.text }}</dd>
                          <dd><span>{{ ll.score }}分</span></dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <!--  信誉状况 -->
              <el-form-item label="信誉状况" v-for="(m, i) in Moelform.ReputationStatus" :key="m.key"
                :prop="Moelform.ReputationStatus">
                <div class="modeForm">
                  <div class="el_sel_btn">
                    <ModeSelect v-model="m['ReputationStatus']" :ModeData="ReputationStatus"
                      :ModeIsDisabled="m.IsDisabled" />
                    &emsp;&emsp;
                    <el-tooltip v-if="!m.IsDisabled" effect="dark" content="添加" placement="top">
                      <el-button @click="handleSelection(m, Number(m.key + 1), 'ReputationStatus', ReputationStatus)" link
                        class="tran45" type="primary" :icon="useRenderIcon(CloseBold)" /></el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top" v-else>
                      <el-button @click="deleteFormValue(m, m.key, 'ReputationStatus', ReputationStatus)" link
                        type="danger" :icon="useRenderIcon(CloseBold)" />
                    </el-tooltip>
                  </div>
                  <div class="show_view">
                    <div class="show_view_list show_left_bor6">
                      <p class="view_list1">{{ m['ReputationStatus']?.lableOne?.label }}</p>
                      <p class="view_list2">{{ m['ReputationStatus']?.lableTow?.label }}</p>
                      <div class="show_view_lists">
                        <dl v-for="(ll, ii) in m?.ReputationStatus?.lableTow?.children" :key="ii">
                          <dd>{{ ll.text }}</dd>
                          <dd><span>{{ ll.score }}分</span></dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <!--  发展前景 -->
              <el-form-item label="发展前景" v-for="(m, i) in Moelform.DevelopmentProspect" :key="m.key"
                :prop="Moelform.DevelopmentProspect">
                <div class="modeForm">
                  <div class="el_sel_btn">
                    <ModeSelect v-model="m['DevelopmentProspect']" :ModeData="DevelopmentProspect"
                      :ModeIsDisabled="m.IsDisabled" />
                    &emsp;&emsp;
                    <el-tooltip v-if="!m.IsDisabled" effect="dark" content="添加" placement="top">
                      <el-button
                        @click="handleSelection(m, Number(m.key + 1), 'DevelopmentProspect', DevelopmentProspect)" link
                        class="tran45" type="primary" :icon="useRenderIcon(CloseBold)" /></el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top" v-else>
                      <el-button @click="deleteFormValue(m, m.key, 'DevelopmentProspect', DevelopmentProspect)" link
                        type="danger" :icon="useRenderIcon(CloseBold)" />
                    </el-tooltip>
                  </div>
                  <div class="show_view">
                    <div class="show_view_list show_left_bor7">
                      <p class="view_list1">{{ m['DevelopmentProspect']?.lableOne?.label }}</p>
                      <p class="view_list2">{{ m['DevelopmentProspect']?.lableTow?.label }}</p>
                      <div class="show_view_lists">
                        <dl v-for="(ll, ii) in m?.DevelopmentProspect?.lableTow?.children" :key="ii">
                          <dd>{{ ll.text }}</dd>
                          <dd><span>{{ ll.score }}分</span></dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <!--  企业状况 -->
              <el-form-item label="企业状况" v-for="(m, i) in Moelform.EnterpriseCondition" :key="m.key"
                :prop="Moelform.EnterpriseCondition">
                <div class="modeForm">
                  <div class="el_sel_btn">
                    <ModeSelect v-model="m['EnterpriseCondition']" :ModeData="EnterpriseCondition"
                      :ModeIsDisabled="m.IsDisabled" />
                    &emsp;&emsp;
                    <el-tooltip v-if="!m.IsDisabled" effect="dark" content="添加" placement="top">
                      <el-button
                        @click="handleSelection(m, Number(m.key + 1), 'EnterpriseCondition', EnterpriseCondition)" link
                        class="tran45" type="primary" :icon="useRenderIcon(CloseBold)" /></el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top" v-else>
                      <el-button @click="deleteFormValue(m, m.key, 'EnterpriseCondition', EnterpriseCondition)" link
                        type="danger" :icon="useRenderIcon(CloseBold)" />
                    </el-tooltip>
                  </div>
                  <div class="show_view">
                    <div class="show_view_list show_left_bor8">
                      <p class="view_list1">{{ m['EnterpriseCondition']?.lableOne?.label }}</p>
                      <p class="view_list2">{{ m['EnterpriseCondition']?.lableTow?.label }}</p>
                      <div class="show_view_lists">
                        <dl v-for="(ll, ii) in m?.EnterpriseCondition?.lableTow?.children" :key="ii">
                          <dd>{{ ll.text }}</dd>
                          <dd><span>{{ ll.score }}分</span></dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </TransitionGroup>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button @click="SubimtFrom(RefMoelform)" :loading="btnloading" type="primary">确定</el-button>
        <el-button @click="CloseModeVisible(RefMoelform)"> 取消 </el-button>
      </template>
    </ReDialog>
  </div>
</template>
<script lang="ts" setup>
import qs from 'qs'
import { ref, reactive, nextTick, computed, onMounted, defineEmits } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import ModeSelect from "./ModeSelect.vue"
import { useRoute } from 'vue-router';
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import CloseBold from "@iconify-icons/ep/close-bold";
import { GetEnterpriseCreditData, CreateEnterpriseCreditModel } from "@/api/stu/DataScene";
const Emits = defineEmits(['GetOptions2', 'GetModelGradeList']);
const route = useRoute();
const ModeVisible = ref<boolean>(false);
const NAllArrys = ref<any>([]);
///  企业
const EnterpriseMsg = ref();
const LeadershipQuality = ref();
const EconomicStrength = ref();
const FundStructure = ref();
const OperatingBenefit = ref();
const ReputationStatus = ref();
const DevelopmentProspect = ref();
const EnterpriseCondition = ref();
const btnloading = ref<boolean>(false);
const NdataList2 = ref();
const RefMoelform = ref<FormInstance>()
// 获取选中的一级value 放进 container
/* 控制添加摁钮 */
/* end 摁钮 */
const Moelform = reactive<any>({
  modeName: "",
  EnterpriseMsg: [{ key: 1, IsDisabled: false }],
  LeadershipQuality: [{ key: 1, IsDisabled: false }],
  FundStructure: [{ key: 1, IsDisabled: false }],
  EconomicStrength: [{ key: 1, IsDisabled: false }],
  OperatingBenefit: [{ key: 1, IsDisabled: false }],
  ReputationStatus: [{ key: 1, IsDisabled: false }],
  DevelopmentProspect: [{ key: 1, IsDisabled: false }],
  EnterpriseCondition: [{ key: 1, IsDisabled: false }]
});

// 公共函数
function handleSelection(val, nums, property, arr) {
  let arrys = [].concat(...arr.map(q => q.children));
  if (!val[property]) {
    ElMessage.warning("请选择完毕后添加");
    return;
  }
  if (Moelform[property].length == arrys.length) {
    ElMessage.warning(`当前分类最多可添加${arrys.length}条数据`);
    return;
  }

  arr.forEach(obj => {
    obj.children.forEach(child => {
      if (child.label == val[property]?.lableTow?.label) child.IsDisabled = true;
    });
  });

  val.IsDisabled = true;
  const obj = { key: nums, IsDisabled: false };

  // 根据不同的 property 决定将 obj 添加到哪个数组中
  if (property === 'EnterpriseMsg') {
    Moelform.EnterpriseMsg.push(obj);
  } else if (property === 'LeadershipQuality') {
    Moelform.LeadershipQuality.push(obj);
  } else if (property === 'FundStructure') {
    Moelform.FundStructure.push(obj);
  } else if (property === 'EconomicStrength') {
    Moelform.EconomicStrength.push(obj);
  } else if (property === 'OperatingBenefit') {
    Moelform.OperatingBenefit.push(obj);
  } else if (property === 'ReputationStatus') {
    Moelform.ReputationStatus.push(obj);
  } else if (property === 'DevelopmentProspect') {
    Moelform.DevelopmentProspect.push(obj);
  } else if (property === 'EnterpriseCondition') {
    Moelform.EnterpriseCondition.push(obj);
  }
}
function deleteFormValue(value, num, form, data) {
  data.forEach(obj => {
    obj.children.forEach(child => {
      if (child.label == value[form]?.lableTow?.label) child.IsDisabled = false;
    });
  });
  if (Moelform[form].length == 1) return;
  value.IsDisabled = false;
  Moelform[form] = Moelform[form].filter(obj => obj.key !== num);
}

// 提交表单
function SubimtFrom(row) {
  (row as any).validate(async valid => {
    if (!valid) return;
    let Arry_EnterpriseMsg = [];
    let Arry_FundStructure = [];
    let Arry_EconomicStrength = [];
    let Arry_OperatingBenefit = [];
    let Arry_LeadershipQuality = [];
    let Arry_ReputationStatus = [];
    let Arry_DevelopmentProspect = [];
    let Arry_EnterpriseCondition = [];
    let SeleteArry = [];
    // 获取必需项
    const ArryName = ['EnterpriseMsg', 'LeadershipQuality', 'FundStructure', 'EconomicStrength', 'OperatingBenefit', 'ReputationStatus', 'DevelopmentProspect', 'EnterpriseCondition']
    const AllArry = Object.values(Moelform).filter(item => Array.isArray(item))
    AllArry.forEach((item: any) => {
      item.forEach(item2 => {
        for (let key in item2) {
          if (ArryName.includes(key)) {
            SeleteArry.push(item2[key].lableTow)
          }
        }
      })
    })
    function pushToArrayIfPresent(arry, key) { if (key?.lableTow) arry.push(key.lableTow.creditInfoItemId); }
    for (let key in Moelform) {
      if (key == "EnterpriseMsg") {
        Moelform[key].forEach((el) => {
          for (let keys in el) {
            if (keys.includes("EnterpriseMsg")) pushToArrayIfPresent(Arry_EnterpriseMsg, el[keys]);
          }
        })
      }
      if (key == "LeadershipQuality") {
        Moelform[key].forEach((el) => {
          for (let keys in el) {
            if (keys.includes("LeadershipQuality")) pushToArrayIfPresent(Arry_LeadershipQuality, el[keys]);
          }
        })
      }
      if (key == "FundStructure") {
        Moelform[key].forEach((el) => {
          for (let keys in el) {
            if (keys.includes("FundStructure")) pushToArrayIfPresent(Arry_FundStructure, el[keys]);
          }
        })
      }
      if (key == "EconomicStrength") {
        Moelform[key].forEach((el) => {
          for (let keys in el) {
            if (keys.includes("EconomicStrength")) pushToArrayIfPresent(Arry_EconomicStrength, el[keys]);
          }
        })
      }
      if (key == "OperatingBenefit") {
        Moelform[key].forEach((el) => {
          for (let keys in el) {
            if (keys.includes("OperatingBenefit")) pushToArrayIfPresent(Arry_OperatingBenefit, el[keys]);
          }
        })
      }
      if (key == "ReputationStatus") {
        Moelform[key].forEach((el) => {
          for (let keys in el) {
            if (keys.includes("ReputationStatus")) pushToArrayIfPresent(Arry_ReputationStatus, el[keys]);
          }
        })
      }
      if (key == "DevelopmentProspect") {
        Moelform[key].forEach((el) => {
          for (let keys in el) {
            if (keys.includes("DevelopmentProspect")) pushToArrayIfPresent(Arry_DevelopmentProspect, el[keys]);
          }
        })
      }
      if (key == "EnterpriseCondition") {
        Moelform[key].forEach((el) => {
          for (let keys in el) {
            if (keys.includes("EnterpriseCondition")) pushToArrayIfPresent(Arry_EnterpriseCondition, el[keys]);
          }
        })
      }
    }
    // 必填项总长度
    const RequiredLen = NAllArrys.value.filter(item => item.vereist);
    // 已选的
    const SeleteRequiredLen = SeleteArry.filter(item => item && item.vereist);
    if (RequiredLen.length !== SeleteRequiredLen.length) {
      ElMessage.warning("尚有必选项未选，请注意检查");
      return
    }

    const data = {
      taskId: route.query.taskId,
      planId: route.query.planId,
      modelName: Moelform.modeName,
      enterpriseMsg: JSON.stringify([...new Set(Arry_EnterpriseMsg)]),
      fundStructure: JSON.stringify([...new Set(Arry_FundStructure)]),
      economicStrength: JSON.stringify([...new Set(Arry_EconomicStrength)]),
      operatingBenefit: JSON.stringify([...new Set(Arry_OperatingBenefit)]),
      leadershipQuality: JSON.stringify([...new Set(Arry_LeadershipQuality)]),
      reputationStatus: JSON.stringify([...new Set(Arry_ReputationStatus)]),
      developmentProspect: JSON.stringify([...new Set(Arry_DevelopmentProspect)]),
      enterpriseCondition: JSON.stringify([...new Set(Arry_EnterpriseCondition)])
    }
    btnloading.value = true;
    const res = await CreateEnterpriseCreditModel(data);
    if (res.success) {
      Emits("GetOptions2");
      Emits("GetModelGradeList");
      ModeVisible.value = false;
      CloseModeVisible(row)
      ElMessage.success(res.msg);
      btnloading.value = false;

    } else {
      setTimeout(() => {
        btnloading.value = false;
      }, 1500);
      ElMessage.error(res.msg)
    }
  })
}

// 修改对话框状态
function SetModeVisible() {
  GetPersonalCreditDatas()
  ModeVisible.value = true;

}

// 关闭对话框
function CloseModeVisible(row) {
  row.resetFields()
  ModeVisible.value = false;
  Moelform.EnterpriseMsg = [{ key: 1, IsDisabled: false }];
  Moelform.LeadershipQuality = [{ key: 1, IsDisabled: false }];
  Moelform.EconomicStrength = [{ key: 1, IsDisabled: false }];
  Moelform.FundStructure = [{ key: 1, IsDisabled: false }];
  Moelform.OperatingBenefit = [{ key: 1, IsDisabled: false }];
  Moelform.ReputationStatus = [{ key: 1, IsDisabled: false }];
  Moelform.DevelopmentProspect = [{ key: 1, IsDisabled: false }];
  Moelform.EnterpriseCondition = [{ key: 1, IsDisabled: false }];

}

async function GetPersonalCreditDatas() {
  const res = await GetEnterpriseCreditData();
  EnterpriseMsg.value = res.data.enterpriseMsg
  LeadershipQuality.value = res.data.leadershipQuality
  EconomicStrength.value = res.data.economicStrength
  FundStructure.value = res.data.fundStructure
  OperatingBenefit.value = res.data.operatingBenefit
  ReputationStatus.value = res.data.reputationStatus
  DevelopmentProspect.value = res.data.developmentProspect
  EnterpriseCondition.value = res.data.enterpriseCondition
  if (res.success) {
    // const arry = [];
    // for (let key in res.data) {
    //   const nk = res.data[key];
    //   nk.forEach(el => {
    //     el.children.forEach(els => {
    //       arry.push(els)
    //     })
    //   });
    // };
    delete res.data['modelName']; // delete 模型名称
    const arry = Object.values(res.data).flatMap((nk: any) =>
      nk.flatMap(el => el.children)
    );
    NAllArrys.value = arry;
  }
}

defineExpose({
  SetModeVisible,
  CloseModeVisible
})



</script>

<style lang="scss" scoped>
/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);

}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translate(10px, 0);
}

.dialog-footer {
  margin: 0 auto;
  display: block;
  text-align: center;
}

.ModeVisible {
  max-height: 390px;
  overflow-x: hidden;
  overflow-y: auto;
}

.modeForm {
  width: 100%;

  .el_sel_btn {
    width: 100%;
    display: flex;
    align-items: center;

    :deep(.el-icon) {
      font-size: 22px;
    }
  }

  .show_view {
    text-align: left;

    .show_view_list {
      margin-top: 10px;
      padding-left: 10px;

      .view_list2 {
        margin-left: 20px;
      }

      .show_view_lists {
        margin-left: 40px;
      }

      dl {
        display: flex;
        align-items: center;

        dd {
          min-width: 150px;
          margin-right: 10px;

        }

        span {
          margin-left: 5px;
          color: red;
        }
      }
    }
  }
}

.zhushi {
  text-align: left;
  margin-bottom: 15px;
  padding-left: 17%;
}

.show_left_bor1 {
  border-left: 3px solid #409eff;
}

.show_left_bor2 {
  border-left: 3px solid #bd9b40;
}

.show_left_bor3 {
  border-left: 3px solid #67c23a;
}

.show_left_bor4 {
  border-left: 3px solid #305a91;
}

.show_left_bor5 {
  border-left: 3px solid #913089;
}

.show_left_bor6 {
  border-left: 3px solid #b4a02a;
}

.show_left_bor7 {
  border-left: 3px solid #117d8b;
}

.show_left_bor8 {
  border-left: 3px solid #6e151a;
}

.tran45 {
  transform: rotateZ(45deg);
}

// @media screen and (max-width:1600px) {
//   .ModeVisible {
//     max-height: 400px;
//   }
// }
</style>
